<template>
  <div>
    <div v-if="showbutton"><el-button @click="submit()"> 填报</el-button></div>
    <table style="width: 100%" border="1" cellspacing="1">
      <tbody>
        <tr>
          <td colspan="1">学校名称</td>
          <td colspan="8"><input type="text" v-model="dataform.orgName" /></td>
        </tr>
        <tr>
          <td colspan="1">法人代表</td>
          <td colspan="4">
            <input type="text" v-model="dataform.legalPerson" />
          </td>
          <td colspan="2">固定电话</td>
          <td colspan="2">
            <input type="text" v-model="dataform.staticPhone" />
          </td>
        </tr>
        <tr>
          <td colspan="1">向公众开放起始年份</td>
          <td colspan="4">
            <input type="text" v-model="dataform.startTime" />
          </td>
          <td colspan="2">场馆总面积(㎡)</td>
          <td colspan="2"><input type="text" v-model="dataform.acreage" /></td>
        </tr>
        <tr>
          <td colspan="1" :rowspan="dataform.fSheet7bList.length">
            向公众开放的场馆
          </td>
          <el-tooltip
            content="右键可以新增和删除一行"
            placement="top"
            effect="light"
            :open-delay="500"
          >
            <td
              colspan="4"
              @contextmenu.prevent="showContextMenu($event, 0)"
              class="venue-cell"
            >
              场馆名称/面积(㎡)
            </td>
          </el-tooltip>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet7bList[0].placeName" />
          </td>
          <td colspan="2">
            <input type="text" v-model="dataform.fSheet7bList[0].acreage" />
          </td>
        </tr>
        <tr
          v-for="(item, index) in dataform.fSheet7bList.slice(1)"
          :key="index"
        >
          <el-tooltip
            content="右键可以新增和删除一行"
            placement="top"
            effect="light"
            :open-delay="500"
          >
            <td
              colspan="4"
              @contextmenu.prevent="showContextMenu($event, index + 1)"
              class="venue-cell"
            >
              场馆名称/面积(㎡)
            </td>
          </el-tooltip>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet7bList[index + 1].placeName"
            />
          </td>
          <td colspan="2">
            <input
              type="text"
              v-model="dataform.fSheet7bList[index + 1].acreage"
            />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="2">开放类型(划"√")</td>
          <td colspan="4">每天开放</td>
          <td colspan="4"><input type="text" v-model="opentype.everyday" /></td>
        </tr>
        <tr>
          <td colspan="4">节假日开放</td>
          <td colspan="4">
            <input type="text" v-model="opentype.HolidaysAndFestivals" />
          </td>
        </tr>
        <tr>
          <td colspan="1">日均开放时长(小时)</td>
          <td colspan="8">
            <input type="text" v-model="dataform.dayTimeNum" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="5">经费投入</td>
          <td colspan="4">累计投入(万元)</td>
          <td colspan="4">
            <input type="text" v-model="dataform.allPutMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="4" rowspan="4">上一年度投入经费(万元)</td>
          <td colspan="2">本省市财政补贴</td>
          <td colspan="2">
            <input type="text" v-model="dataform.provinceMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="2">学校自筹</td>
          <td colspan="2">
            <input type="text" v-model="dataform.schoolMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="2">其他</td>
          <td colspan="2">
            <input type="text" v-model="dataform.otherMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="2">合计</td>
          <td colspan="2">
            <input type="text" v-model="dataform.totalMoney" />
          </td>
        </tr>
        <tr>
          <td colspan="1" rowspan="4">购买保险情况(划“√”)</td>
          <td colspan="4" rowspan="3">已购买</td>
          <td colspan="3">公共责任险</td>
          <td colspan="1">
            <input type="text" v-model="insurance.PublicResponsibility" />
          </td>
        </tr>
        <tr>
          <td colspan="3">人身意外伤害险</td>
          <td colspan="1">
            <input type="text" v-model="insurance.AccidentOfLife" />
          </td>
        </tr>
        <tr>
          <td colspan="3">其他险种</td>
          <td colspan="1"><input type="text" v-model="insurance.other" /></td>
        </tr>
        <tr>
          <td colspan="4">没有购买</td>
          <td colspan="4">
            <input type="text" v-model="insurance.NoPurchase" />
          </td>
        </tr>
      </tbody>
    </table>
    <div style="display: flex; justify-content: space-between;">
      <div>填表人：<input type="text" v-model="dataform.writePeople" /></div>
      <div>联系电话：<input type="text" v-model="dataform.writePhone" /></div>
    </div>
    <div style="display: flex; justify-content: space-between;">
      <div>填报时间：<input type="text" v-model="dataform.writeTime" /></div>
      <div>填报单位：<input type="text" v-model="dataform.orgName" /></div>
    </div>
    <div
      v-if="contextMenuVisible"
      :style="contextMenuStyle"
      class="context-menu"
    >
      <div @click="addRow" class="menu-item">新增行</div>
      <div @click="deleteRow" class="menu-item">删除行</div>
    </div>
  </div>
</template>

<script>
import qs from "qs";
import { insert_update_sheet7 } from "@/api/statistics.js";
export default {
  props: {
    Alldata: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      showbutton: true,
      dataform: {
        orgName: "",
        legalPerson: "",
        staticPhone: "",
        startTime: "",
        acreage: "",
        openType: "", //1每天开放，2节假日开放
        dayTimeNum: "",
        allPutMoney: "",
        provinceMoney: "",
        schoolMoney: "",
        otherMoney: "",
        totalMoney: "",
        insuranceStatus: "",
        writePeople: "",
        writeTime: "",
        writePhone: "",
        fSheet7bList: [
          {
            placeName: "",
            acreage: ""
          },
          {
            placeName: "",
            acreage: ""
          },
          {
            placeName: "",
            acreage: ""
          },
          {
            placeName: "",
            acreage: ""
          },
          {
            placeName: "",
            acreage: ""
          },
          {
            placeName: "",
            acreage: ""
          },
          {
            placeName: "",
            acreage: ""
          },
          {
            placeName: "",
            acreage: ""
          }
        ]
      },
      //1公共责任险 2人生意外险 3 其他险种 4没有购买 insuranceStatus
      insurance: {
        PublicResponsibility: "",
        AccidentOfLife: "",
        other: "",
        NoPurchase: ""
      },

      opentype: {
        everyday: "",
        HolidaysAndFestivals: ""
      },
      contextMenuVisible: false,
      contextMenuStyle: {
        left: "0px",
        top: "0px"
      },
      currentRowIndex: -1
    };
  },

  //更新数据
  watch: {
    Alldata(newValue, oldValue) {
      this.dataform = newValue;
      if (this.dataform.openType == 1) {
        this.opentype.everyday = "√";
      } else if (this.dataform.openType == 2) {
        this.opentype.HolidaysAndFestivals = "√";
      }

      if (this.dataform.insuranceStatus == "1") {
        this.insurance.PublicResponsibility = "√";
      } else if (this.dataform.insuranceStatus == "2") {
        this.insurance.AccidentOfLife = "√";
      } else if (this.dataform.insuranceStatus == "3") {
        this.insurance.other = "√";
      } else if (this.dataform.insuranceStatus == "4") {
        this.insurance.NoPurchase = "√";
      }
    }
  },

  methods: {
    showbuut() {
      this.showbutton = false;
    },

    submit() {
      if (this.opentype.everyday) {
        this.dataform.openType = 1;
      } else if (this.opentype.HolidaysAndFestivals) {
        this.dataform.openType = 2;
      }

      if (this.insurance.PublicResponsibility) {
        this.dataform.insuranceStatus = 1;
      } else if (this.insurance.AccidentOfLife) {
        this.dataform.insuranceStatus = 2;
      } else if (this.insurance.other) {
        this.dataform.insuranceStatus = 3;
      } else if (this.insurance.NoPurchase) {
        this.dataform.insuranceStatus = 4;
      }

      // console.log(qs.stringify(this.dataform));
      insert_update_sheet7(this.dataform).then(res => {
        this.$message.success("填报成功");
      });
    },

    showContextMenu(event, index) {
      event.preventDefault();
      this.contextMenuVisible = true;
      this.contextMenuStyle.left = event.clientX + "px";
      this.contextMenuStyle.top = event.clientY + "px";
      this.currentRowIndex = index;
    },

    addRow() {
      const newRow = {
        placeName: "",
        acreage: ""
      };
      this.dataform.fSheet7bList.splice(this.currentRowIndex + 1, 0, newRow);
      this.contextMenuVisible = false;

      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },

    deleteRow() {
      if (this.dataform.fSheet7bList.length <= 1) {
        this.$message({
          message: "至少保留一个场馆",
          type: "warning"
        });
        return;
      }
      this.dataform.fSheet7bList.splice(this.currentRowIndex, 1);
      this.contextMenuVisible = false;

      // 强制更��视图
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    }
  },

  mounted() {
    // 点击其他地方关闭右键菜单
    document.addEventListener("click", e => {
      if (!e.target.closest(".context-menu")) {
        this.contextMenuVisible = false;
      }
    });
  },

  beforeDestroy() {
    // 清理事件监听
    document.removeEventListener("click", this.closeContextMenu);
  }
};
</script>

<style scoped>
table {
  border-collapse: collapse;
  /* //合并为一个单一的边框 */
  border-color: #a2a7ab;
  /* //边框颜色按实际自定义即可 */
  margin-bottom: 10px;
}

thead tr th {
  background-color: #f8f8f9;
  /* //设置表格标题背景色 */
  padding: 3px;
  text-align: center;
}

tbody tr td {
  padding: 3px;
  text-align: center;
  height: 34px;
  /* //设置单元格最小高度 */
}
tbody tr td input {
  width: 99%;
  height: 95%;
  text-align: center;
  border: none;
}

.context-menu {
  position: fixed;
  background: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px 0;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.menu-item {
  padding: 5px 15px;
  cursor: pointer;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

.venue-cell {
  cursor: context-menu;
  /* 添加右键菜单的鼠标样式提示 */
}
</style>
